<template>
    <div id="guiji_map" class="map-guiji"></div>
</template>

<script>
import togeojson from 'togeojson'
export default {
  name: "GuijiMap",
  props: {
    gpxFile: String
  },
  data(){
      return {
          // TOO: 做个地图加载中的效果
          loading: false
      }
  },
  mounted(){
    const gpxFile = this.gpxFile
    const AMap = window.AMap
    const AMapUI = window.AMapUI
    const self = this

    //创建地图
    const map = new AMap.Map('guiji_map', {
        zoom: 4
    });

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        //just some colors
        const colors = [
            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
            "#651067", "#329262", "#5574a6", "#3b3eac"
        ];

        const pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            autoSetFitView: true,
            map: map, //所属的地图实例
            getPath: function(pathData) {
                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
                pathLineStyle: {
                    dirArrowStyle: true
                },
                getPathStyle: function(pathItem, zoom) {

                    const color = colors[pathItem.pathIndex % colors.length],
                        lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

                    return {
                        pathLineStyle: {
                            strokeStyle: color,
                            lineWidth: lineWidth
                        },
                        pathLineSelectedStyle: {
                            lineWidth: lineWidth + 2
                        },
                        pathNavigatorStyle: {
                            fillStyle: color
                        }
                    };
                }
            }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        self.loading = true

        $.get(gpxFile, function(res) {
            const gpx = new DOMParser().parseFromString(res, 'text/xml')
            const geoJson = togeojson.gpx(gpx)

            const features = geoJson.features
            const amapPathJson = features.map(item => ({
            name: item.properties.name || item.properties.time,
            path: item.geometry.coordinates
        }))

        self.loading = false

        pathSimplifierIns.setData(amapPathJson);
    
        //创建一个巡航器
        const navg0 = pathSimplifierIns.createPathNavigator(1, {
            loop: true, //循环播放
            speed: 500000
        });

        navg0.start();
    });
    });
  }
}
</script>

<style lang="scss">
.map-guiji{
  min-height: 300px;
}
</style>